import React, {Component} from 'react';
/* 在标签中{}可以直接写就是代码 */
//事件监听 onXxx 驼峰命名
/* this 的事件绑定 用.bind(this) */
/* state 是让组件控制自己的状态，props 是让外部对组件自己进行配置。 */
class Atest1 extends Component {
  showFunction = function (e) {
    // console.log(e); //event 对象
    console.log('show Atest1');
    // console.log(e.target.innerHTML);
  }

  showFunction2 = function (e) {

    console.log('这是showFunction2');

  }

  //如有有两个事件,不需要原生的addEventListener方法进行事件监听

  render() {
    return (
      <div onClick={this.showFunction}>
        <span>测试组件的事件监听</span>
      </div>
    )
  }
};

//state和setState 状态改变
class Title extends Component {
  // 需要改变的状态在state这个对象里面,构造函数里面初始化生成state对象
  // 由于ES6的语法原因,从Component类继承的类,必须添加以下的constructor方法完成初始化(以及调用super()方法)
  // 而且ES6的语法导致this的指向问题,所以在事件方法上要添加.bind(this)方法
  // 或者在constructor完成初始化的时候对this进行指向绑定
  constructor() {
    super();
    this.state = {
      isActive: false
    };
    this.clickThis = this
      .clickThis
      .bind(this);
  }

  clickThis() {
    // this.setState({   isActive: !this.state.isActive });
    // console.log(this.state.isActive);
    console.log(this);
  }

  render() {
    return (
      <h1 onClick={this
        .clickThis
        .bind(this)}>React 小书</h1>
    )
  }
}

//组件的props
/* 在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为 props 对象的键值： */
class Atest2 extends Component {

  render() {
    console.log(this);
    return (
      <div>
        <h2>props的用法</h2>
        <p>{this.props.show1}</p>
        <p>{this.props.show2}</p>
      </div>

    )
  }
}

const users = [
  {
    username: 'Jerry',
    age: 21,
    gender: 'male'
  }, {
    username: 'Tomy',
    age: 22,
    gender: 'male'
  }, {
    username: 'Lily',
    age: 19,
    gender: 'female'
  }, {
    username: 'Lucy',
    age: 20,
    gender: 'female'
  }
]
//列表功能
/* 如果你往 {} 放一个数组，React.js 会帮你把数组里面一个个元素罗列并且渲染出来。 */
/* react.js 中的列表就是将用jsx代码片段组成数组,然后把这数组渲染出来 */
/* of 关键字才是枚举对象 */
/* 对于用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。 */
class ListComponent extends Component {

  render() {
    console.log(this);
    //1.定义的一个数组
    const usersElements = [];
    //2.将users数组中数据以jsx的形式放入usersElements中
    let i = 0;
    for (let user of users) {
      // usersElements.push({ <div>   <div>姓名：{user.username}</div>
      // <div>年龄：{user.age}</div>   <div>性别：{user.gender}</div>   <hr /> </div> })

      let aa = <div key={i}>
        <div >姓名：{user.username}</div>
        <div>年龄：{user.age}</div>
        <div>性别：{user.gender}</div>
        <hr/>
      </div>;
      i++;
      usersElements.push(aa);
    };
    console.log(usersElements);
    return (
      <div>
        <h2>props的用法</h2>
        <div>{usersElements}</div>
      </div>

    )
  }
}

/* default 导出的区别  */
// export default {   Atest1,   Title };
export {Atest1, Atest2, Title, ListComponent};